<!--
 * @Description: 监控信息
 * @Autor: 何兴家
 * @Date: 2020-12-04 09:29:53
 * @LastEditors: 马毅
 * @LastEditTime: 2021-10-11 10:04:41
-->
<template>
  <div>
    <FormPanel ref="formPanel" :list="formPanelList" :cols="4" :isSubmitBtn="false" formType="show"></FormPanel>
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="12" :offset="0">
        <BreakSpace label="提示信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="hintInfoTable"
          height="206px"
          :dataSource="hintInfoDataSource"
          :isPagination="false"
          :isColumnFilter="false"
          :isToperInfo="false"
          :isSelectColumn="false"
          :columns="hintInfoColumns"
          :onColumnsChange="columns => (this.hintInfoColumns = columns)"
        ></FilterTable>
      </el-col>
      <el-col :span="12" :offset="0">
        <BreakSpace label="最近维修信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="repairInfoTable"
          height="206px"
          :dataSource="repairInfoDataSource"
          :isPagination="false"
          :isColumnFilter="false"
          :isToperInfo="false"
          :isSelectColumn="false"
          :columns="repairInfoColumns"
          :onColumnsChange="columns => (this.repairInfoColumns = columns)"
        >
        </FilterTable>
      </el-col>
    </el-row>

    <BreakSpace label="活动" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      ref="activityTable"
      height="auto"
      :dataSource="activityDataSource"
      :isPagination="false"
      :isSelectColumn="!isBookingOrder"
      :isColumnFilter="false"
      :isToperInfo="false"
      selectionType="single"
      :columns="activityColumns"
      :onRowSelectChange="handleActiveTableSelectChange"
      :onColumnsChange="columns => (this.activityColumns = columns)"
    >
    </FilterTable>

    <BreakSpace v-show="!isBookingOrder" label="预警信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      v-show="!isBookingOrder"
      ref="warningTable"
      height="auto"
      :dataSource="warningDataSource"
      :isPagination="false"
      :isColumnFilter="false"
      :isToperInfo="false"
      :isSelectColumn="false"
      :columns="warningColumns"
      :onColumnsChange="columns => (this.warningColumns = columns)"
    >
    </FilterTable>

    <BreakSpace v-show="!isBookingOrder" label="预约安排" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      v-show="!isBookingOrder"
      ref="fowardOrderTable"
      height="auto"
      :dataSource="fowardOrderDataSource"
      :isPagination="false"
      :isColumnFilter="false"
      :isToperInfo="false"
      selectionType="single"
      :columns="fowardOrderColumns"
      :onRowSelectChange="handleFowardOrderTableSelectChange"
      :onColumnsChange="columns => (this.fowardOrderColumns = columns)"
    >
    </FilterTable>

    <div class="btnWrap">
      <el-button @click="handleCancel" v-show="!isBookingOrder">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction } from '@/utils';
import { getAppId } from '@/assets/js/auth';

import { queryMonitorInfo } from '@/api/repair/repairReception/customer';

export default {
  props: ['vin', 'carInfo', 'openType', 'residueSetMealCount'],
  mixins: [dictionary],
  data() {
    this.selectedActivityList = []; // 选中的活动数据
    this.selectedfowardOrderDataList = []; // 选中的预约单数据
    return {
      queryIngData: false, // 页面是否在请求
      formPanelList: this.createFormPanelList(),
      repairInfoColumns: this.createRepairInfoColumns(),
      warningColumns: this.createWarningColumns(),
      activityColumns: this.createActivityColumns(),
      fowardOrderColumns: this.createFowardOrderColumns(),
      hintInfoColumns: this.createHintInfoColumns(),
      hintInfoDataSource: [], // 提示信息数据源
      repairInfoDataSource: [], // 最近维修信息数据源
      warningDataSource: [], // 预警信息
      activityDataSource: [], // 活动数据源
      fowardOrderDataSource: [] // 预约安排数据源
    };
  },
  computed: {
    // 判断是否为预约单（字段及选择不同）
    isBookingOrder() {
      return !!this.openType;
    }
  },
  watch: {
    queryIngData(newVal, oldVal) {
      console.log(newVal);
      if (newVal) {
        this.$refs.hintInfoTable.START_LOADING();
        this.$refs.repairInfoTable.START_LOADING();
        this.$refs.warningTable.START_LOADING();
        this.$refs.activityTable.START_LOADING();
        this.$refs.fowardOrderTable.START_LOADING();
      } else {
        this.$refs.hintInfoTable.STOP_LOADING();
        this.$refs.repairInfoTable.STOP_LOADING();
        this.$refs.warningTable.STOP_LOADING();
        this.$refs.activityTable.STOP_LOADING();
        this.$refs.fowardOrderTable.STOP_LOADING();
      }
    }
  },
  mounted() {
    this.vin && this.initQuery();
    this.initCarInfo();
  },
  methods: {
    createFormPanelList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'engineNo'
        },
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo'
        }
      ];
    },
    createHintInfoColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '监控信息',
          dataIndex: 'message'
        }
      ];
    },
    createRepairInfoColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN'
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_CODE'
        },
        {
          title: '维修时间',
          dataIndex: 'RO_CREATE_DATE'
        }
      ];
    },
    createWarningColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '预警信息',
          dataIndex: 'ASSEMBLY_NAME',
          align: 'center'
        }
      ];
    },
    createActivityColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '活动编号',
          dataIndex: 'MA_NO'
        },
        {
          title: '活动名称',
          dataIndex: 'MA_TITLE'
        },
        {
          title: '总次数',
          dataIndex: 'COUNTS'
        },
        {
          title: '已使用次数',
          dataIndex: 'USED_COUNTS'
        },
        // {
        //   title: '活动类型',
        //   dataIndex: 'ACTIVITY_TYPE',
        //   dictItems: this.createDictList(8080)
        // },
        {
          title: '开始日期',
          dataIndex: 'B_DATE'
        },
        {
          title: '结束日期',
          dataIndex: 'E_DATE'
        },
        {
          title: '活动总金额',
          dataIndex: 'LABOUR_AMOUNT'
        }
      ];
    },
    createFowardOrderColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '预约单号',
          dataIndex: 'BOOKING_ORDER_NO'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150
        },
        {
          title: '预约类别',
          dataIndex: 'BOOKING_TYPE_CODE',
          dictItems: this.createDictList(8055)
        },
        {
          title: '预约进厂时间',
          dataIndex: 'BOOKING_COME_TIME',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '联系人',
          dataIndex: 'CONTACTOR_NAME',
          showOverflowTooltip: true
        },
        // {
        //   title: '锁定人',
        //   dataIndex: 'LOCK_USER',
        //   dictItems: []
        // },
        {
          title: '创建时间',
          dataIndex: 'CREATED_AT',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '备注',
          dataIndex: 'REMARK'
        }
      ];
    },
    // 活动选择变化
    handleActiveTableSelectChange(list) {
      this.selectedActivityList = list;
    },
    // 预约单选中
    handleFowardOrderTableSelectChange(list) {
      this.selectedfowardOrderDataList = list;
    },
    // 初始化车辆信息
    initCarInfo() {
      this.formPanelList.forEach(item => {
        item.initialValue = this.carInfo[item.fieldName];
      });
    },
    // 初始化查询
    async initQuery() {
      this.queryIngData = true;
      try {
        let res = await queryMonitorInfo({ vin: this.vin });
        if (res.resultCode == 200) {
          let data = res.data;

          // 提示信息部分数据
          let hintInfo = [];
          hintInfo[0] = data.IsFiristRepair == 10041001 ? { message: '该车辆首次进厂' } : { message: '该车辆非首次进厂' };
          hintInfo[1] = { message: '该车未结清账款：' + data.arrearsInfo + '元' };
          hintInfo[2] = data.nextMaintainDate ? { message: '预计下次保养日期：' + data.nextMaintainDate.split(' ')[0] } : { message: '预计下次保养日期：暂无' };
          hintInfo[3] = data.insuranceEndDate ? { message: '保险到期日期：' + data.insuranceEndDate } : { message: '暂无保单信息' };
          !(getAppId() == 'beijing') && !this.isBookingOrder && (hintInfo[4] = { message: '车辆剩余服务包次数：' + (this.residueSetMealCount || 0) }); // 套餐包业务目前仅涉及AF
          this.hintInfoDataSource = hintInfo;

          // 最近维修信息
          this.repairInfoDataSource = data.repairInfo;
          // 预警信息
          data.warningInfo.forEach(item => {
            item.ASSEMBLY_NAME = item.ASSEMBLY_NAME + '已达到预警';
          });
          this.warningDataSource = data.warningInfo;
          // 活动
          this.activityDataSource = data.activityInfo;
          // 预约安排
          this.fowardOrderDataSource = data.bookingInfo || [];
        }
      } catch (err) {
        console.log(err, '查询监控信息失败');
      } finally {
        this.queryIngData = false;
      }
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    },
    // 点击确定
    handleConfirm() {
      // 带出前处理部分数据
      // 批量活动项目配件初始化默认值
      if (this.selectedActivityList.length) {
        this.selectedActivityList[0].partList.forEach(item => {
          item.PART_NO = item.PART_NO || item.PART_CODE;
          item.PART_SALES_PRICE = item.PRICE;
          item.PRICE_RATE = 1;
          item.PART_QUANTITY = item.COUNTS;
          item.ACTIVITY_CODE = this.selectedActivityList[0].MA_NO;
          item.PRICE_TYPE = item.PRICE_TYPE || 82481001;
          item.CHARGE_PARTITION_CODE = 'S'; // 活动配件收费区分默认索赔
        });
        this.selectedActivityList[0].labourList.forEach(item => {
          item.ACTIVITY_CODE = this.selectedActivityList[0].MA_NO;
          item.ASSIGN_LABOUR_HOUR = item.STD_LABOUR_HOUR;
          item.CHARGE_PARTITION_CODE = 'S'; // 活动项目收费区分默认索赔
        });
      }

      // 预约单项目配件初始化默认值
      if (this.selectedfowardOrderDataList.length) {
        this.selectedfowardOrderDataList[0].labour.forEach(item => {
          item.ASSIGN_LABOUR_HOUR = item.STD_LABOUR_HOUR;
          delete item.ITEM_ID;
        });
        this.selectedfowardOrderDataList[0].part.forEach(item => {
          item.PART_SALES_PRICE = item.SALES_PRICE;
          item.PART_SALES_AMOUNT = item.PART_AMOUNT;
          item.PART_QUANTITY = item.BOOKING_QUANTITY;
          item.PART_ITEM_ID = item.ITEM_ID;
          item.PRICE_TYPE = item.PRICE_TYPE || 82481001;
          delete item.ITEM_ID;
        });
      }
      this.$emit('onConfirm', {
        active: this.selectedActivityList,
        foward: this.selectedfowardOrderDataList
      });
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.hintMessageWrap {
  min-height: 200px;
}
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
